<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>c04-list</title>
  </head>
  <body>
    <div id="app">
      <!-- 学生列表 -->
      <input type="text" v-model="keywords">
      <ul class="stu-list">
        <li v-for="(stu, index) in filterArr()" :key="index">
          姓名：{{stu.name}} 性别：{{stu.gender}} 地址：{{stu.address}}
        </li>
      </ul>
      <!-- 个人信息 -->
      <div>
        <p v-for="(val, key) in infos" :key="key">
            {{key}} -> {{val}}
        </p>
      </div>
      <!-- 数据更新检测 -->
      <input type="text" v-model="fruit">
      <button type="button" @click="add">添加</button>
      <button type="button" @click="remove">删除</button>
      <button type="button" @click="modify">修改</button>
      <ul class="fruit-list">
        <li v-for="(fruit, index) in fruits" :key="index">
          {{fruit}}
        </li>
      </ul>
      <!-- 过滤器 -->
      <ul class="goods-list">
        <li v-for="(item, index) in goods" :key="index">
          <span>{{item.name}}</span>
          <span>{{item.price | addSymble}}</span>
        </li>
      </ul>
    </div>
    <!-- built files will be auto injected -->
  </body>
</html>
